<template>
  <div class="exambox">
    <div class="flex" v-if="!finish">
        <div class="content">
            <h1 style="text-align: center;">{{ paper.name }}</h1>
            <ul class="flex item-center between">
                <li>
                    <span class="black bold large">考试题数：</span> <span>{{ testList.length || 0 }}</span>
                </li>
                <li>
                    <span class="black bold large">考试时间：</span> <span>{{ ( paper.duration || 0) + '分钟' }}</span>
                </li>
                <li>
                    <span class="black bold large">满分：</span> <span>10分</span>
                </li>
                <li>
                    <span class="black bold large">及格分：</span> <span>4分</span>
                </li>
            </ul>
            <div class="textbox">
                <PaperQuestion
                    ref="paperQuestion"
                    :question="question"
                    :currentNum="currentNum"
                    :mode="paper.answer_mode"
                    :total="testList.length"
                    @changeUanswer="changeUanswer"
                ></PaperQuestion>
            </div>
            <div class="btns">
                <el-button type="primary" @click="preQuestion()" :disabled="currentNum == 1">上一题</el-button>
                <el-button v-if="'1'==paper.answer_mode && !question.uanswer && ( question.question_type == '2' || question.question_type == '3' )" type="primary"  @click="handleConfirm()" 
                    >确认答案</el-button>
                <el-button v-else type="primary"  @click="nextQuestion()" 
                    :disabled="currentNum == testList.length">下一题</el-button>
                <!-- <el-button type="primary" @click="handleSubmitPaper()" v-if="currentNum == testList.length">交卷</el-button> -->
            </div>
            
        </div>
        <div class="desc">
            <div class="time">
                <div class="black large">剩余时间</div>
                <div>{{ timeRemaining}}</div>
            </div>
            <div class="name">
                姓名：{{ '管理员' }}
            </div>
            <div class="items">
                <ul class="flex">
                    <li :class="[
                        currentNum == i + 1 && 'current',
                        item.uanswer ? ( item.answer == item.uanswer ? 'rightli' : 'errorli' ) : ''
                    ]" 
                        @click="changeQuestion(i)"
                        v-for="(item, i) in testList" :key="item.id">
                        {{ i + 1 }}
                    </li>
                </ul>
                <div style="text-align: center;">
                    <el-button @click="handleSubmitPaper()">交卷</el-button>
                </div>
            </div>
        </div>
    </div>

    <div v-else>
        <div class="resultbox">
            <div class="cirt">{{ result.score + '分' }}</div>
            <h1 class="pname">{{ paper.name }}</h1>
        </div>
    </div>
  </div>
</template>

<script>
import Api from '@/api'
import PaperQuestion from '@/components/exam/PaperQuestion'
export default {
    components: {
        PaperQuestion
    },
    data() {
        return {
            finish: false,
            uanswer: {},
            paper: {},
            testList: [],
            paperId: '',
            currentNum: 1,
            question: {},
            duration: 0,
            interval: null,
            result: {}
        }
    },
    beforeDestroy() {
        if (this.interval != null)
            clearInterval(this.interval)
    },
    computed: {
        timeRemaining() {
            if (this.duration <= 0) {
                return '00:00'
            }   
            let m = parseInt(this.duration / 60)
            let s = this.duration % 60
            return (m < 10 ? '0' + m : m   ) + ':' + (s < 10 ? '0' + s : s)
        }
    },
    mounted() {
        this.paperId = this.$route.params.id
        this.initPaper()
    },
    methods: {
        handleConfirm() {
            this.$refs.paperQuestion.handleSubmit()
        },
        handleSubmitPaper() {
            let i = 0 
            this.testList.forEach(item => {
                if (!item.uanswer) {
                    i++
                }
            })
            if (i > 0) {
                this.$confirm(`尚有${i}道题目未完成答题，是否确认交卷？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    
                }).then(() => {
                    this.submitPaper()
                }).catch(() =>{})
            } else {
                this.submitPaper()
            }
        },
        async submitPaper() {
            let res =  await Api.finishAnswer({
                id: this.uanswer.id,
                paper_id: this.paper.id
            })
            if (this.interval) {
                clearInterval(this.interval)
            }
            if (res.success) {
                res = await Api.getExamUanswerInfo({
                    id: this.uanswer.id
                })
                this.result = res.data || {}
                this.finish = true
            }
        },
        changeQuestion(i) {
            this.question = this.testList[i]
            this.currentNum = i + 1
        },
        preQuestion() {
            this.question = this.testList[--this.currentNum - 1]
        },
        nextQuestion() {
            this.question = this.testList[this.currentNum++]
        },
        changeUanswer(uanswer) {
            this.question.uanswer = uanswer
            Api.uanswerinfo({
                id: this.question.id,
                question_id: this.question.question_id,
                uanswer
            }).then(res => {
                
            })
        },
        async initPaper() {
            let res ;
            // 从答题记录页面过来会携带此参数
            let uanwerId = this.$route.query.uanswer
            if (!uanwerId) {
                res = await Api.uanswer({
                    paper_id: this.paperId
                })
                if (!res.success) {
                    this.$confirm(`${res.msg}`, '提示', {
                        confirmButtonText: '确定',
                        type: 'warning'
                        }).then(() => {
                            this.$router.go(-1)
                        }).catch(() => {
                            this.$router.go(-1)
                        });
                }
                this.uanswer = res.data || {}
            } else {
                this.uanswer = {
                    id: uanwerId
                }
            }
            

            res = await Api.verifyAnswer({
                paper_id: this.paperId,
            })

            res = await Api.paperInfo({
                id: this.paperId,
                uanswer_id: this.uanswer.id
            })
            this.paper = res.data || {}
            this.initTimeRemaining(parseInt(this.paper.duration))

            res = await Api.getQuestionList({
                paper_id: this.paperId,
                uanswer_id: this.uanswer.id
            })
            this.testList = res.data[0].questionList || []
            this.question = this.testList[0] || {}
            
        },
        initTimeRemaining(duration) {
            if (duration <= 0) {
                return this.duration = 0
            }
            this.duration = duration
            this.interval = setInterval(() => {
                this.duration--
                if (this.duration <= 0) {
                    this.submitPaper()
                    clearInterval(this.interval)
                }
            }, 1000)
            return '03:29'
        },
    }
}
</script>

<style lang="scss" scoped>
.rightli {
    background-color: skyblue !important;
    color: #fff !important;
}
.errorli {
    background-color: rgba($color: #ff0000, $alpha: .7) !important;
    color: #fff !important;
}
.current {
    border: 1px solid red !important;
}
.exambox {
    padding: 20px;

    .content {
        flex: 1;
        margin-right: 20px;
        padding: 20px 30px;
        box-shadow: 0 0 10px rgba($color: #aaa, $alpha: .3);
        >h1 {
            font-size: 22px;
            color: #000;
            font-weight: 600;
            padding-bottom: 20px;
            
        }
        >ul {
            padding: 30px 0;
            border-bottom: 1px solid #eee;
        }
        .btns {
            margin-top: 20px;
        }
    }
    .desc {
        width: 400px;
        >div {
            text-align: center;
            margin-bottom: 10px;
            padding: 20px 0;
            font-size: 22px;
            box-shadow: 0 0 10px rgba($color: #aaa, $alpha: .3);
        }
        .time {
            
            >div {
                font-size: 22px;
                padding: 10px;
            }
        }
        .items {
            >ul {
                flex-wrap: wrap;
                padding: 0 20px;
                li {
                    width: 50px;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    margin: 0 15px 15px 0;
                    border: 1px solid #ccc;
                    cursor: pointer;
                }
            }
            
        }
    }
}
.resultbox {
    box-shadow: 0 0 20px rgba($color: #aaa, $alpha: .8);
    padding: 20px;
    width: 70%;
    margin: 20px auto;
    min-width: 400px;
    .cirt {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        margin: 20px auto;
        background: rgba($color: #ff0000, $alpha: .7) !important;;
        font-size: 22px;
        color: #fff;
        text-align: center;
        line-height: 200px;
    }
    .pname {
        text-align: center;
        margin: 20px;
        color: rgba($color: #ff0000, $alpha: .7) !important;;
        font-size: 22px;
    }
}
</style>